<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
        <div>
          <el-input style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    v-model="empName"
                    @keydown.enter.native="initperMv"
                    clearable
                    @clear="initperMv"
                    placeholder="请输入员工名进行搜索..."></el-input>
          <el-button type="primary" icon="el-icon-search" @click="initperMv">搜索
          </el-button>
        </div>
        <el-button type="primary" icon="el-icon-plus" @click="showAddEmpRemove">添加</el-button>
      </div>
    </div>
    <div>
      <el-table
          :data="perMv"
          border
          size="mini"
          stripe>
        <el-table-column
            type="selection"
            align="left"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID"
            align="left"
            fixed
            width="120">
        </el-table-column>
        <el-table-column
            prop="employee.name"
            label="员工姓名"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="department.name"
            label="调动后部门"
            align="left"
            width="200">
        </el-table-column>
        <el-table-column
            prop="position.name"
            label="调动后职位"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="调动原因"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="removeDate"
            label="调动日期"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showEditPerMvView(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deletePerMv(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes,prev, pager, next, jumper, ->, total"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%">
      <div style="display: flex;justify-content: space-around;align-items: center">
        <el-form ref="pmForm" :model="pm" :rules="rules">
          <el-form-item label="编  号" label-width="120px">
            <el-input disabled v-model="pm.id"  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="员工姓名" label-width="120px" prop="eid">
            <el-autocomplete
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入内容"
                @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item  label="调动后部门" prop="departmentId"  label-width="120px">
            <el-popover
                placement="bottom"
                title="请选择部门"
                width="300"
                trigger="manual"
                v-model="visible">
              <el-tree
                  :data="allDeps"
                  :props="defaultProps"
                  default-expand-all
                  @node-click="handleNodeClick"></el-tree>
              <div slot="reference"
                   style="width: 150px;display: inline-flex;border: 1px solid #dedede;height: 24px;border-radius: 5px;cursor: pointer;align-items: center;font-size: 13px;padding-left: 8px;box-sizing: border-box"
                   @click="showDepView">{{inputDepName}}
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item  label="调动后职位" prop="afterJobId" label-width="120px">
            <el-select v-model="pm.afterJobId" placeholder="请选择活动区域">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item   label="调动日期" label-width="120px" prop="removeDate">
            <el-col>
              <el-date-picker type="date" placeholder="选择日期" v-model="pm.removeDate" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item  label="调动原因" label-width="120px">
            <el-input type="textarea" v-model="pm.reason"></el-input>
          </el-form-item>
          <el-form-item  label="备注" label-width="120px">
            <el-input type="textarea" v-model="pm.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddEmpPerMv">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PerMv",
  mounted() {
    this.initperMv();
    this.initPositions();
    this.loadAll();
  },
  data(){
    return {
      perMv: [],
      empName: '', //搜索
      currentPage: 1,
      size: 10,
      total: 0,
      dialogTitle: '员工调离',
      pm:{
        id: null,
        eid: null,
        afterDepId: null,
        afterJobId: null,
        removeDate: '',
        reason: '',
        remark: ''
      },
      dialogVisible: false,
      visible: false,
      allDeps: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      inputDepName: '',
      positions: [],
      restaurants: [],
      state: '',
      timeout:  null,
      rules: {
        eid: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
        afterDepId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
        afterJobId: [{required: true, message: '请输入职位', trigger: 'blur'}],
        removeDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
      }
    }
  },
  methods: {
    //分页查全部的数据
    initperMv(){
      this.getRequest('/personnel/remove/?currentPage=' + this.currentPage + '&size=' + this.size + '&ename='+this.empName).then(resp =>{
        if(resp){
          this.perMv = resp.data;
          this.total = resp.total;
        }
      })
      /*获取sessionStorage中的部门信息*/
      if (!window.sessionStorage.getItem('allDeps')) {
        this.getRequest('/employee/basic/deps').then(resp => {
          if (resp) {
            this.allDeps = resp;
            window.sessionStorage.setItem('allDeps', JSON.stringify(resp));
          }
        });
      } else {
        this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
      }
    },
    //初始化职位功能 ==> 后期做多级联动
    initPositions() {
      this.getRequest('/employee/basic/positions').then(resp => {
        if (resp) {
          this.positions = resp;
        }
      })
    },
    /*删除*/
    deletePerMv(data){
      this.$confirm('此操作将永久删除 ' + data.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/personnel/remove/'+data.id).then(resp => {
          if (resp) {
            this.initperMv();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*点击编辑按钮，信息回显*/
    showEditPerMvView(data){
      this.dialogTitle = '编辑员工调离信息',
          this.pm = data,
          this.dialogVisible = true,  //显示编辑窗口
          this.inputDepName = data.department.name,
          this.state = data.employee.name  //员工姓名回显
    },
    //显示添加员工调动
    showAddEmpRemove(){
      this.dialogTitle = '新增员工调离信息'
      this.dialogVisible = true  //显示编辑窗口
    },
    //单击部门Tree时进行显示和隐藏
    handleNodeClick(data) {
      this.inputDepName = data.name
      this.pm.afterDepId = data.id;
      this.visible = !this.visible;
    },
    //单击部门输入框时进行显示和隐藏
    showDepView() {
      this.visible= !this.visible;
    },
    //pageSize 改变时会触发
    sizeChange(size) {
      this.size = size;
      this.initperMv();
    },
    //currentPage 改变时会触发
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.initperMv();
    },
    //加载全部的员工id与姓名
    loadAll(){
      this.getRequest('/employee/basic/getAllName').then(resp => {
          if(resp){
            resp.obj.forEach((item,index) => {
              this.restaurants.push({"value": item.name,"eid": item.id})
            })
          }
       })
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        // eid,value
        return (state.value.indexOf(queryString) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
      this.pm.eid = item.eid
    },
    /*加载全部的员工id与姓名结束*/
    //添加员调动
    doAddEmpPerMv(){
      if(this.pm.id){ //通过是否有id进行新增或修改
        this.$refs['pmForm'].validate(valid => {
          if (valid) {
            console.log(this.pm)
            this.putRequest('/personnel/remove/', this.pm).then(resp => {
              if (resp) {
                this.dialogVisible = false;
                this.initperMv();
              }
            })
          }
        })
      } else {
        this.$refs['pmForm'].validate(valid => {
          if (valid) {
            console.log(this.pm)
            this.postRequest('/personnel/remove/', this.pm).then(resp => {
              if (resp) {
                this.dialogVisible = false;
                this.initperMv();
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .el-popover__reference {
    width: 216px !important;
    height: 30px !important;
  }
</style>
